<template>
	<view class="lines-content">
		<view class="lines-content_item" v-for="index in 5" :key="index">
			<view class="lines-content_item_dt">
				<view class="lines-content_item_dt_day">
					D{{index}}
				</view>
				<view class="lines-content_item_dt_title">
					出发地-乌鲁木齐（接站）出发地-乌鲁木齐（接站）出发地-乌鲁木齐（接站）
				</view>
			</view>
			<view class="lines-content_item_dl">
				<view class="lines-content_item_dl_icon">
					<rui-icon icon="spot" size="32" color="var(--color)"></rui-icon>
				</view>
				<view class="lines-content_item_dl_title">
					行程详情
				</view>
				<view class="lines-content_item_dl_content">
					123123123
				</view>
			</view>
			<view class="lines-content_item_dl">
				<view class="lines-content_item_dl_icon">
					<rui-icon icon="food" size="32" color="var(--color)"></rui-icon>
				</view>
				<view class="lines-content_item_dl_title">
					用餐
				</view>
				<view class="lines-content_item_dl_content">
					早中晚
				</view>
			</view>
			<view class="lines-content_item_dl">
				<view class="lines-content_item_dl_icon">
					<rui-icon icon="hotel" size="32" color="var(--color)"></rui-icon>
				</view>
				<view class="lines-content_item_dl_title">
					住宿
				</view>
				<view class="lines-content_item_dl_content">
					北屯
				</view>
			</view>
		</view>
	</view>
</template>

<script>

</script>

<style lang="scss" scoped>
	.lines-content {
		&_item {
			margin-left: 20rpx;
			margin-bottom: 20rpx;

			&:first-child {
				margin-top: 50rpx;
			}

			&:last-child {
				margin-bottom: 0;
			}

			&_dt {
				font-weight: bold;
				position: relative;
				margin-bottom: 30rpx;

				&_day {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					background: var(--color);
					color: #fff;
					text-align: center;
					line-height: 50rpx;
					position: absolute;
					left: -25rpx;
					top: -6rpx;
				}

				&_title {
					padding-left: 45rpx;
				}
			}

			&_dl {
				position: relative;
				padding-bottom: 30rpx;
				padding-left: 45rpx;
				border-left: 1rpx solid #eee;
				&:last-child{
					border-left: none;
				}
				

				&_icon {
					width: 50rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					position: absolute;
					top: -8rpx;
					left: -25rpx;
					background: #fff;
				}

				&_title {
					font-weight: bold;
					color: var(--color);
				}

				&_content {
					margin-top: 10rpx;
					// background: #f4ffff;
					// border-radius: 10rpx;
					// padding: 15rpx;
				}

			}
		}
	}
</style>